<div class="hk-sidebar" ng-class="{ 'hk-sidebar-collapsed': hideSidebar }">
  <div>
    <div class="pull-right" ng-click="hideSidebar = !hideSidebar">
      <button class="btn btn-link hk-sidebar-toggle">
        <i class="fa" ng-class="hideSidebar ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
      </button>
    </div>
    <div class="hk-filter-v-block">
      <div class="popover-markup">
        <h4>Filter by</h4>
      </div>
    </div>

    <div class="hk-filter-v-block" ng-show="fsb.showTime">
      <label class="hk-label-heading" for="timeSpanField">Time Span</label>
      <select pf-select class="form-control" id="timeSpanField" ng-options="t.time as t.text for t in timeSpans"
        ng-model="$root.sbFilter.timeSpan">
      </select>

      <div ng-show="$root.sbFilter.timeSpan === ''">
        <hr style="margin: 5px">

        <div>
          <div class="input-group input-group-sm date" options="startDTOptions"
            datetime-picker max-date="$root.sbFilter.customEndTime" ng-model="$root.sbFilter.customStartTime">
            <span class="input-group-addon">From</span>
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
        <div>
          <div class="input-group input-group-sm date" options="endDTOptions"
            datetime-picker min-date="$root.sbFilter.customStartTime" ng-model="$root.sbFilter.customEndTime">
            <span class="input-group-addon" style="width: 40px;">To</span>
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="hk-filter-v-block" ng-if="fsb.showBtxns">
      <label><button class="btn-link" ng-click="showSearchBtxn = !showSearchBtxn"><i class="fa" ng-class="showSearchBtxn ? 'fa-angle-right' : 'fa-angle-down'"></i>Transaction</button></label>
      <div collapse="showSearchBtxn">
        <div class="radio">
          <label><input type="radio" name="txn" ng-model="$root.sbFilter.criteria.transaction" value="" checked> All </label>
        </div>
        <div class="radio" ng-repeat="txn in $root.sbFilter.data.transactions">
          <label><input type="radio" name="txn" ng-model="$root.sbFilter.criteria.transaction" value="{{txn}}"> {{txn}} </label>
        </div>
      </div>
    </div>

    <div class="hk-filter-v-block" ng-show="fsb.showProps">
      <label><button class="btn-link" ng-click="showSearchProp = !showSearchProp"><i class="fa" ng-class="showSearchProp ? 'fa-angle-right' : 'fa-angle-down'"></i>Properties</button></label>
      <div collapse="showSearchProp">

        <ul ng-repeat="(type, value) in $root.sbFilter.criteria.properties | groupBy: 'name'" class="fa-ul">
          <label class="sb-prop-title">{{ type }}</label>
          <li class="sb-prop" ng-repeat="prop in value" ng-click="toggleExcludeInclude(prop)">
            <span class="hk-cursor-pointer">
              <i class="fa-li fa" aria-hidden="true"
                ng-class="prop.operator === 'HASNOT' ? 'fa-minus-square sb-toggle-exc' : 'fa-plus-square sb-toggle-inc'"></i>
            </span>
            {{ prop.value }}
            <span class="hk-cursor-pointer pull-right sb-prop-remove" ng-click="remPropertyFromFilter(prop)">
              <i class="fa fa-remove"></i>
            </span>
          </li>
        </ul>
        <hr class="sb-prop-hr" ng-show="$root.sbFilter.criteria.properties.length">
        <div class="sb-prop-input">
          <div class="input-group">
            <span class="input-group-addon">Name</span>
            <select class="form-control" ng-options="p.name for p in $root.sbFilter.data.properties track by p.name" ng-model="selPropName"
              ng-change="getPropertyValues(selPropName)"></select>
          </div>
          <!--select pf-select class="form-control" id="timeSpanField" ng-options="p.name for p in properties track by p.name"
            ng-model="$root.testFilter">
          </select-->
          <div ng-show="selPropName" class="hk-properties-value">
            <label> Value </label>
            <div class="input-group">
              <!-- <span class="input-group-addon">Value</span> -->
              <input collapse="showSearchHost" type="text" class="form-control" name="propValueField"
                ng-model="selPropValue" ng-model-options="{ updateOn: 'default blur' }"
                placeholder="Type '{{selPropName.name}}' value" typeahead-editable="false"
                typeahead="propValue.value for propValue in sbPropertyValues | filter:$viewValue | limitTo:12" />
              <div class="input-group-btn">
                <button type="button" class="btn btn-default" ng-disabled="!selPropValue"
                  ng-click="addPropertyToFilter(selPropName.name, selPropValue, 'HAS')">
                  <i class="fa fa-plus sb-prop-incexc"></i>
                </button>
                <button type="button" class="btn btn-default" ng-disabled="!selPropValue"
                  ng-click="addPropertyToFilter(selPropName.name, selPropValue, 'HASNOT')">
                  <i class="fa fa-minus sb-prop-incexc"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hk-filter-v-block" ng-if="fsb.showText">
      <label class="hk-label-heading">Text</label>
      <input type="text" class="form-control" placeholder="Contains text" ng-model="$root.sbFilter.search"/>
    </div>

    <div class="hk-filter-v-block" ng-class="{'has-error': invalidHostname}" ng-if="fsb.showHosts">
      <label><button class="btn-link" ng-click="showSearchHost = !showSearchHost"><i class="fa" ng-class="showSearchHost ? 'fa-angle-right' : 'fa-angle-down'"></i>Host Name</button></label>
      <input collapse="showSearchHost" type="text" class="form-control" name="hostNameField"
         ng-model="$root.sbFilter.criteria.hostName" ng-model-options="{ updateOn: 'default blur' }"
         placeholder="Enter a host name" typeahead-editable="false" typeahead-min-length="0"
         typeahead="hostName for hostName in $root.sbFilter.data.hostNames | filter:$viewValue | limitTo:12" typeahead-no-results="invalidHostname" />
    </div>

  </div>
</div>
